<template>
  <div class="login-wrapper">
    <img src="@/assets/image/bg1.png" alt="" class="bg_img">

    <div class="login_view">
      <div class="title">HI~</div>
      <div class="title">{{ $t('login.欢迎登录') }} MMM</div>

      <div class="tips">{{ $t('login.账号密码登录') }}</div>

      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="0px" class="login_form">
        <el-form-item prop="account" class="input">
          <el-input ref="account" v-model="loginForm.account" type="text" auto-complete="off"
            :placeholder="$t('placeholder.请输入账号')" />
        </el-form-item>
        <el-form-item prop="password" class="input">
          <el-input v-model="loginForm.password" type="password" show-password auto-complete="off"
            :placeholder="$t('placeholder.请输入密码')" @keyup.enter.native="handleLogin" />
        </el-form-item>
        <el-form-item>
          <div class="remenber">
            <el-checkbox v-model="loginForm.rememberMe">{{ $t('login.记住密码') }}</el-checkbox>
            <el-button type="text" @click="$router.push({ path: '/retrieve' })">{{ $t('login.忘记密码') }}</el-button>
          </div>
        </el-form-item>
        <el-form-item>

          <el-button type="primary" @click.native.prevent="handleLogin" class="login_btn">
            <span>{{ $t('login.立即登录') }}</span>
          </el-button>
        </el-form-item>

        <el-form-item>
          <div class="footer">
            <div class="no_account">{{ $t('login.还没有账号') }}？</div>
            <div class="go_register" @click="$router.push({ path: '/register' })">{{ $t('login.注册') }}</div>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Background from "../assets/img/login-background.jpg";
import { mapState } from "vuex";
import Lockr from "lockr";
export default {
  name: "Login",
  data() {
    return {
      Background,
      loginForm: {
        account: "",
        password: "",
        rememberMe: true,
      },
      loginRules: {
        account: [
          { required: true, trigger: "blur", message: this.$t('placeholder.用户名不能为空') },
        ],
        password: [
          { required: true, trigger: "blur", message: this.$t('placeholder.密码不能为空') },
        ],
      },
      redirect: undefined,
    };
  },
  computed: {
    ...mapState({
      globalConfig: (state) => state.globalConfig,
    }),
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 获取url的参数
      // let token = this.$route.query.token;
      // if (token) {
      //   return this.dologin({ token: token });
      // }
      // 如果有记住密码、则填充
      const LoginAccount = Lockr.get("LoginAccount");
      if (LoginAccount) {
        this.loginForm.account = LoginAccount.account;
        this.loginForm.password = LoginAccount.password;
        this.loginForm.rememberMe = true;
        this.$refs.account.focus();
      }
    });
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        const data = {
          account: this.loginForm.account,
          password: this.loginForm.password
        };
        if (this.loginForm.rememberMe) {
          Lockr.set("LoginAccount", data);
        } else {
          Lockr.rm("LoginAccount");
        }
        if (valid) this.dologin(data);
      });
    },
    async dologin(data) {
      let { userinfo } = await this.$api.usersApi.login(data);
      this.$store.commit('changeToken', userinfo)
      this.$store.commit('changeUserInfo', userinfo)


      let im_user_info = userinfo.im_user_info;
      data = {
        userInfo: im_user_info,
        authToken: userinfo.im_token,
        sessionId: im_user_info.sessionId
      }


      this.$store.commit('SET_AUTH', data)
      this.$store.commit('SET_USERINFO', data.userInfo)

      this.$router.replace({
        name: "home"
      })
      


      // window.location.reload();

      // console.log(res)

      // this.loading = true;
      // this.$store.dispatch("Login", {
      //   account: "13800000020",
      //   password: "123456",
      //   rememberMe: true,
      // }).then((res) => {
      //   console.log(res)
      //   window.location.reload();
      // }).catch(() => {
      //   this.loading = false;
      // });

    }
  }
};
</script>

<style lang="scss">
.login-wrapper {
  width: 100%;
  height: 100vh;

  .bg_img {
    float: left;
    width: calc(100% - 742px);
    height: 100%;
  }

  .login_view {
    float: right;
    width: 742px;
    height: 100vh;
    padding: 0 130px;
    box-sizing: border-box;
    background: linear-gradient(323deg, #B9D6FF 0%, #FFFFFF 86%);
    box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;

    .title {
      font-family: HYCuHei, HYCuHei;
      font-weight: normal;
      font-size: 48px;
      color: #2273FF;
    }

    .tips {
      width: 108px;
      text-align: center;
      font-size: 18px;
      color: #333333;
      line-height: 22px;
      margin: 100px 0 32px;
      position: relative;

      &::after {
        content: "";
        width: 51px;
        height: 0px;
        border-radius: 0px 0px 0px 0px;
        border: 2px solid #2273FF;
        position: absolute;
        left: 50%;
        bottom: -8px;
        transform: translateX(-50%);
      }
    }

    .login_form {
      .input {
        height: 62px;

        input {
          height: 62px;
          border-radius: 12px;
          padding: 0 16px;
          box-sizing: border-box;
        }
      }

      .remenber {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .login_btn {
        width: 100%;
        height: 62px;
        font-weight: 400;
        font-size: 18px;
        color: #FFFFFF;
        background: #2273FF;
        border-radius: 12px 12px 12px 12px;
      }
    }

    .footer {
      display: flex;
      justify-content: center;
      font-size: 14px;

      .no_account {
        color: #333333;
      }

      .go_register {
        color: #2273FF;
        cursor: pointer;
      }
    }
  }
}
</style>
